<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"
          type="text/css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"
            type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"
            type="text/javascript"></script>
    <!-- 引入自定义css文件 style.css -->
</head>
<body>
<jsp:include page="head.jsp"/>

<h3 align="center">

    <div class="form-inline">
        <div class="form-group">
            <label for="exampleInputName2">快递公司:</label>
            <input type="text" class="form-control" id="exampleInputName2" list="itemList" value="圆通速递">
            <datalist id="itemList">
                <option>顺丰速运</option>
                <option>中通快递</option>
                <option>申通快递</option>
                <option>圆通速递</option>
                <option>韵达速递</option>
                <option>邮政快递包裹</option>
                <option>EMS</option>
                <option>京东物流</option>
                <option>快捷快递</option>
            </datalist>
        </div>
        <div class="form-group">
            <label for="orderId">订单号：</label>
            <input type="text" class="form-control" id="orderId" value="887527574471373836">
        </div>
        <button id="trackQuery">查询</button>
    </div>
</h3>
<table class="table table-striped table-bordered  table-hover" id="trackTable">
</table>
<jsp:include page="foot.jsp"/>
</body>
<script>

    $("#exampleInputName2").focus(function () {
        $("#exampleInputName2").val("");
    })
    /**
     * 主要区分json字符串和json字符对象的区别
     * bootstrap中form表单每次button都会刷新，，，没有完成ajax请求就已经刷新了，获取不到数值；
     * 解决方案，将form标签改为div
     */
    $("#trackQuery").click(function () {
        $.ajax(
            {
                url: "/trackQuery.do",
                data: {
                    company: $("#exampleInputName2").val(),
                    orderId: $("#orderId").val()
                },
                success: function (msg) {
                    var obj = JSON.parse(msg);
                    var arr = obj.Traces;
                    $("#trackTable").append("<tr>" +
                        "<td>" + "订单编号" + "</td>" +
                        "<td>" + "揽货地点" + "</td>" +
                        "<td>" + "揽货时间" + "</td>" +
                        "</tr>")
                    $.each(arr, function (index, item) {
                        $("#trackTable").append("<tr>" +
                            "<td>" + obj.LogisticCode + "</td>" +
                            "<td>" + item.AcceptStation + "</td>" +
                            "<td>" + item.AcceptTime + "</td>"
                            + "</tr>")
                        // alert(obj.AcceptStation);
                    });
                }
            }
        )
    })
</script>
</html>
